<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<!--属性绑定-->
<div id="app1" v-bind:name="myName">
    aa
    <button v-bind:disabled="isButtonDisabled">button</button>
    <br/>
    {{number+1}}
    <br/>
    {{ok? 'yes': 'no'}}
    <br/>
    {{message.split('').reverse().join('')}}
    <br/>
    <p v-if="seen">Now you see me</p>
    <a v-bind:url="url">点我</a>
    <a v-on:click="func1">点击事件</a>
    <br/>
    <!--过滤器-->
    {{message|capitalize}}
</div>
<hr/>
<!--计算属性-->
<div id="app2">
    <p>Original Name: "{{message}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
    <p>computed now: "{{now1}}"</p>
    <p>computed now: "{{now2()}}"</p>
</div>

<hr/>
<!--绑定class和style-->
<div id="app3" class="static" v-bind:class="{'active': isActive,'text-danger': hasError}">
    aa
    <div :class="classObj">bb</div>
</div>
<hr/>
<div id="app4">
    <my-component :class="{active:isActive}"></my-component>
    <div :style="{color:activeColor,fontSize: fontSize+'px'}">aa</div>
    <div :style="styleObj">bb</div>
</div>

<script>
    var app1 = new Vue({
        el: '#app1',
        data:{
            myName: "cyl",
            isButtonDisabled: false,
            number: 10,
            ok: true,
            message: "今天天气不错哟",
            seen: true,
            url: 'http://www.baidu.com'
        },
        methods:{
            func1: function () {
                console.info(this.$data)
            }
        },
        filters:{
            capitalize: function (value) {
                console.info(value)
                if(!value){
                    return ''
                }
                value = value.toString()
                return value.charAt(0).toUpperCase()+value.slice(1)
            }
        }
    });

    var app2 = new Vue({
        el: '#app2',
        data: {
            message: "Hello"
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            },
            now1: function () {
                return Date.now()
            }
        },
        methods: {
            now2: function () {
                return Date.now()
            }
        }
    })

    var app3 = new Vue({
        el: '#app3',
        data: {
            isActive: true,
            hasError: false,
            classObj: {
                active: true,
                hasError: false
            }
        }
    })

    Vue.component('my-component', {
        template: '<p class="baz foo">Hi</p>'
    })
    var app4 = new Vue({
        el: '#app4',
        data:{
            isActive: true,
            hasError: false,
            activeColor: 'red',
            fontSize: 30,
            styleObj: {
                color: 'green',
                fontSize: '25px'
            }
        }
    })
</script>
</body>
</html>